<template>
  <div class="stores-switch">&emsp;
    <a-select
      v-if="userInfo.jyrlx===3"
      v-model="sel_store"
      style="width: 120px"
      @change="handleChange"
      @search="handleSearch"
      placeholder="请输入门店名称搜索"
      show-search
      notFoundContent="查询不到门店"
      :default-active-first-option="false"
      :show-arrow="false"
      :filter-option="false"
    >
      <a-select-option
        v-for="(item, index) in STORE_LIST"
        :key="index"
        :value="item.storesId"
        :type="item.jylx"
      >{{ item.mdmc }}</a-select-option>
    </a-select>
    <a-select
      v-else
      v-model="sel_store"
      style="width: 120px"
      @change="handleChange"
    >
      <a-select-option
        v-for="(item, index) in STORE_LIST"
        :key="index"
        :value="item.storesId"
        :type="item.jylx"
      >{{ item.mdmc }}</a-select-option>
    </a-select>
    <a-icon
      type="sync"
      @click="handlRefreshStores"
      style="cursor:pointer"
      :spin="loading === true" />
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'

export default {
  name: 'Store',
  data () {
    return {
      sel_store: '',
      loading: false,
      timeout: null,
      currentValue: ''
    }
  },
  computed: {
    ...mapGetters([
      'userInfo',
      'STORE_LIST', // 门店列表
      'STORE_ID', // 当前门店ID
      'OPERATOR_TYPE', // 经营类型
      'houseParams', // 房源列表
      'lockParams', // 门锁列表
      'openRecordParams', // 开门记录
      'orderParams' // 入住管理
    ])
  },
  mounted () {
    this.GetStoreList({ hoperatorId: this.userInfo.id, jyrlx: this.userInfo.jyrlx }).then((res) => {
      // 如果storge里面存储的选中门店不存在再默认第一条为选中门店
      let flag = false
      const STORE_ID = this.STORE_ID
      res.map((item, index) => {
        if (item['storesId'] === STORE_ID) {
          flag = true
        }
      })
      // 这里必须再次调佣切换判断事件，原因都是created无法及时获取门店id更新数据
      if (!flag) {
        this.SET_STORE_ID(res[0].storesId)
        this.SET_OPERATOR_TYPE(res[0].jylx)
        this.updateStoresData()
      }
      this.sel_store = this.STORE_ID
      this.SET_STORE_LIST(res)
    }).catch(() => { })
  },
  methods: {
    ...mapMutations([
      'SET_STORE_ID', // 门店Id
      'SET_OPERATOR_TYPE', // 门店所属经营类型
      'SET_STORES_TIEM',
      'SET_STORE_LIST',
      'SET_STORE_REFRESH_TIME',
      'setLockParams',
      'setOpenRecordParams',
      'setOrderParams',
      'setHouseParams'
    ]),
    ...mapActions([
      'GetStoreList', // 门店列表接口
      'getHouseSourceList', // 房源管理列表
      'getLockLists', // 门锁列表
      'getOpenRecordList', // 开门记录
      'getorderListMenuMsg', // 入住管理
      'getStoreListByName'
      // 'getHouseOrderList'// 房态管理列表
    ]),
    /** 刷新门店列表
     *
     */
    handlRefreshStores () {
      this.loading = true
      this.getStoreListAction()
      setTimeout(() => {
        this.loading = false
      }, 500)
    },
    /** 门店切换事件
     * @HouseResourceListSource 房源列表
     * @LockContent 门锁列表
     * @LockHistory 门锁记录
     * @OrderList 入住管理
     * @Analysis 房态管理
     */
    handleChange (value, option) {
      const type = option.data.attrs.type || ''
      this.SET_STORE_ID(value)
      this.SET_OPERATOR_TYPE(type)
      this.updateStoresData()
    },

    /** 查询门店
     *
     */
    handleSearch (value) {
      if (this.timeout) {
        clearTimeout(this.timeout)
        this.timeout = null
      }
      this.currentValue = value
      this.timeout = setTimeout(() => {
        this.getStoreListByName({ name: value }).then((res) => {
          if (this.currentValue === value) {
            this.SET_STORE_LIST(res)
          }
        })
      }, 300)
    },

    /** 门店下数据更新
     * @HouseResourceListSource 房源列表
     * @LockContent 门锁列表
     * @LockHistory 门锁记录
     * @OrderList 入住管理
     * @Analysis 房态管理
     */
    updateStoresData () {
      const routeName = this.$route.name
      const params = {}
      switch (routeName) {
        case 'HouseResourceListSource':
          params.fh = ''
          params.storesId = this.STORE_ID
          params.jylx = this.OPERATOR_TYPE
          this.setHouseParams(params)
          this.getHouseSourceList(this.houseParams).then(res => { }).catch(() => {
            console.log('request.js统一处理错误')
          })
          break
        case 'LockContent':
          params.fh = ''
          params.storesId = this.STORE_ID
          params.jylx = this.OPERATOR_TYPE
          params.page = 1
          params.pagesize = 10
          this.setLockParams(params)
          this.getLockLists(this.lockParams).then(res => { }).catch(() => {
            console.log('request.js统一处理错误')
          })
          break
        case 'LockHistory':
          params.fjh = ''
          params.storesId = this.STORE_ID
          params.jylx = this.OPERATOR_TYPE
          params.page = 1
          params.pagesize = 10
          params.kmrsf = ''
          params.ksrq = ''
          params.jsrq = ''
          params.kmsj = []
          this.setOpenRecordParams(params)
          this.getLockLists(this.openRecordParams).then(res => { }).catch(() => {
            console.log('request.js统一处理错误')
          })
          break
        case 'OrderList':
          params.gjc = ''
          params.storesId = this.STORE_ID
          params.jylx = this.OPERATOR_TYPE
          params.page = 1
          params.pagesize = 10
          this.setOrderParams(params)
          this.getorderListMenuMsg(this.orderParams).then(res => { }).catch(() => {
            console.log('request.js统一处理错误')
          })
          break
        case 'Analysis':
          this.SET_STORE_REFRESH_TIME(new Date().getTime())
          break
      }
    },
    getStoreListAction () {
      this.GetStoreList({ hoperatorId: this.userInfo.id, jyrlx: this.userInfo.jyrlx }).then((res) => {
        // 如果storge里面存储的选中门店不存在再默认第一条为选中门店
        let flag = false
        const STORE_ID = this.STORE_ID
        res.map((item, index) => {
          if (item['storesId'] === STORE_ID) {
            flag = true
          }
        })
        if (!flag) {
          this.SET_STORE_ID(res[0].storesId)
          this.SET_OPERATOR_TYPE(res[0].jylx)
        }
        this.updateStoresData()
        this.sel_store = this.STORE_ID
        this.SET_STORE_LIST(res)
      }).catch(() => { })
    }
  }
}
</script>
<style lang="less" >
.stores-switch {
  color: #fff;
  .sel_style {
    background: transparent;
  }
  .ant-select-selection {
    background: transparent;
    color: #fff;
    border: none;
  }
  .ant-select-focused {
    .ant-select-selection {
      border-color: transparent;
      box-shadow: 0 0 0 transparent;
    }
  }
  .ant-select-selection:focus {
    border-color: transparent;
    box-shadow: 0 0 0 transparent;
  }
  .ant-select-selection:active {
    border-color: transparent;
    box-shadow: 0 0 0 transparent;
  }

  .anticon-down {
    svg {
      color: #fff;
    }
  }
}
</style>
